<template>
  <div class="app-container">
    <drag-tree-table :data="treeData" :on-drag="onTreeDataChange" />
  </div>
</template>

<script>
/**
  Auth: zhangxq
  Created: 2018/11/14
*/
import dragTreeTable from 'drag-tree-table'
import { getCategoryListOrder } from '@/api/classes'

export default {
  name: 'MenuList',
  components: { dragTreeTable },
  data() {
    return {
      treeData: {
        lists: [
          {
            'id': 40,
            'parent_id': 0,
            'order': 0,
            'name': '动物类',
            'url': `/masd/ds`,
            'open': true,
            'lists': []
          },
          {
            'id': 5,
            'parent_id': 0,
            'order': 1,
            'name': '昆虫类',
            'url': `/masd/ds`,
            'open': true,
            'lists': [
              {
                'id': 12,
                'parent_id': 5,
                'open': true,
                'order': 0,
                'name': '蚂蚁',
                'url': '/masd/ds',
                'lists': []
              }
            ]
          },
          {
            'id': 19,
            'parent_id': 0,
            'order': 2,
            'name': '植物类',
            'url': '/masd/ds',
            'open': true,
            'lists': []
          }
        ],
        columns: [
          {
            type: 'selection',
            title: '菜单名称',
            field: 'name',
            width: 200,
            align: 'center',
            formatter: (item) => {
              return '<a>' + item.name + '</a>'
            }
          },
          {
            title: '路由地址',
            field: 'url',
            width: 200,
            align: 'center'
          },
          {
            title: '序号',
            field: 'order',
            width: 200,
            align: 'center'
          },
          {
            title: '操作',
            type: 'action',
            width: 350,
            align: 'center',
            actions: [
              {
                text: '删除',
                onclick: this.onDetail,
                formatter: (item) => {
                  return '<i>删除</i>'
                }
              },
              {
                text: '编辑',
                onclick: this.onEdit,
                formatter: (item) => {
                  return '<i>编辑</i>'
                }
              }
            ]
          }
        ]
      }
    }
  },
  mounted: function() {
    this.getList()
  },
  methods: {
    getList() {
      getCategoryListOrder(1).then((res) => {
        this.treeData.lists = res.data
        console.log(this.treeData.lists)
      }).catch((err) => {
        console.log(err)
      })
    },
    onTreeDataChange(list) {
      console.log(list)
      this.treeData.lists = list
    },
    onEdit(item) {
      console.log('编辑22', item)
    },
    onDetail(item) {
      console.log('详情22', item)
    }
  }
}
</script>
